﻿@using Easy.CMS.Section.Models
@model SectionWidget
@{
    Script.Reqiured("jQueryUi").AtHead();
}
@using (Html.BeginForm())
{
    <div class="panel panel-default">
        <div class="panel-heading">
            @(Model.ID.IsNullOrEmpty() ? "添加组件" : "编辑组件")
        </div>
        <div class="panel-body">
            <input type="hidden" name="ReturnUrl" value="@ViewBag.ReturnUrl" />
            @Html.EditModel()
            @if (Model.Groups != null)
            {
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <span class="badge">
                                        分组
                                    </span>
                                </div>
                                <div class="panel-body" id="section-groups">
                                    @foreach (SectionGroup group in Model.Groups.OrderBy(m => m.Order))
                                    {
                                        Html.RenderPartial("SectionGroup.Edit", group);
                                    }
                                </div>
                                <div class="panel-footer">
                                    <a href="@Url.Action("Create", "SectionGroup", new {sectionWidgetId = Model.ID})" class="btn btn-link btn-xs dialog" data-width="1000" data-height="600">
                                        <i class="glyphicon glyphicon-plus"></i>
                                        添加
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            }
        </div>
        <div class="panel-footer">
            @if (Model.ID.IsNullOrEmpty())
            {
                <input id="design" type="submit" class="btn btn-primary" value="继续" data-value="@ActionType.Continue" />
            }
            else
            {
                <input id="design" type="submit" class="btn btn-primary" value="保存" data-value="@ActionType.Create" />
            }
            <input type="button" class="btn btn-default cancel" value="取消" />
        </div>

    </div>

}
@using (Script.AtFoot())
{
    <script type="text/javascript">
        $(document).on("click", "a.dialog", function () {
            var width = $(this).data("width");
            var height = $(this).data("height");
            
            Easy.ShowUrlWindow({
                url: $(this).attr("href"), title: $(this).text(), callBack: function () {
                    reload();
                }, isDialog: true, width: width||800, height: height||460
            });
            return false;
        });
        $(document).on("click", "a.ajax", function () {
            var link = $(this).attr("href");
            Easy.ShowMessageBox("提示", "确定要删除吗？", function () {
                $.get(link, {}, function (data) {
                    reload();
                }, "json");
            }, true, 3);
            return false;
        });
        function reload() {
            $.get("@Url.Action("Editor","SectionWidget")", { sectionWidgetId: '@Model.ID' }, function (html) {
                $("#section-groups").html(html);
                sortGroup();
            }, "html");
        }
        function sortGroup() {
            $("#section-groups").sortable({
                handle: ".panel-heading",
                stop: function (event, ui) {
                    var result = {}
                    $(event.target).find(".section-group").each(function (i) {
                        result["[" + i + "].ID"] = $(this).data("id");
                        result["[" + i + "].Order"] = i + 1;
                    });
                    $.post("@Url.Action("Sort","SectionGroup")", result, function (data) { reload(); }, "json");
                }
            });
            $(".section-group .list-group").sortable({
                stop: function (event, ui) {
                    var result = {}
                    $(event.target).find(".list-group-item").each(function (i) {
                        result["[" + i + "].ID"] = $(this).data("id");
                        result["[" + i + "].Order"] = i + 1;
                    });
                    $.post("@Url.Action("SortContent","SectionGroup")", result, function (data) { reload(); }, "json");
                }
            });
        }

        $(function() {
            sortGroup();
        });
    </script>
}